<template>
  <div class="create">
    <div class="titles">
      <h1>参评企业名单</h1>
      <!-- <Button type="primary" @click="handleToAddSetting">添 加</Button> -->
      <Select v-model="yearModel" style="width: 200px">
        <Option
          v-for="item in yearList"
          :value="item.value"
          :key="item.value"
          >{{ item.label }}</Option
        >
      </Select>
    </div>
    <div style="display: flex; justify-content: space-between; margin: 10px 0">
      <div>
        <Select v-model="Model1" style="width: 100px; margin-right: 10px">
          <Option
            v-for="item in Model1List"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
        <Select v-model="Model2" style="width: 100px; margin-right: 10px">
          <Option
            v-for="item in Model2List"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
        <Select v-model="Model3" style="width: 100px; margin-right: 10px">
          <Option
            v-for="item in Model3List"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
        <Select v-model="Model4" style="width: 100px; margin-right: 10px">
          <Option
            v-for="item in Model4List"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
        <Input
          v-model="valueSearch"
          placeholder="请搜索"
          style="width: 200px; margin-right: 10px"
        />
        <Button type="primary" style="margin-right: 10px" @click="cleanSelect">清除</Button>
      </div>
      <div>
        <Button type="primary" style="margin-right: 10px" @click="exportFile">导出名单</Button>
        <Button type="primary" style="margin-right: 10px">添加</Button>
        <Upload
          action=""
          style="float: right"
          :on-error="uploadSuccess"
        >
          <Button type="primary" style="margin-right: 10px">批量添加</Button>
        </Upload>
      </div>
    </div>
    <div>
      <Table border :columns="columns" :data="Datas"></Table>
      <Page
        :total="ruledataCount"
        show-sizer
        show-total
        @on-change="changePageCurrent"
        @on-page-size-change="changePageSize"
        style="display: flex;margin-top: 30px;justify-content: center;align-items：flex-end"
      />
    </div>

    <!-- 编辑弹框 -->
    <Modal
      v-model="submintModa"
      title="编辑"
      @on-ok="handleSave"
      @on-cancel="handleCancel"
    >
      <Row class="RowStyle">
        <i-col span="4" style="">Id</i-col>
        <i-col span="14">{{ Id }}</i-col>
      </Row>
      <Row class="RowStyle">
        <i-col span="4" style="">评价年度</i-col>
        <i-col span="14">{{ formItem.Year }}</i-col>
      </Row>
      <Row class="RowStyle">
        <Col span="4" style="line-height: 30px">评价期限</Col>
        <Col span="20">
          <DatePicker
            :value="formItem.term"
            format="yyyy/MM/dd"
            type="daterange"
            placement="bottom-end"
            :placeholder="formItem.term"
            style="width: 280px"
            @on-change="handleToChangeTerm"
          ></DatePicker>
        </Col>
      </Row>
    </Modal>
    <!-- 新增弹框 -->
    <Modal v-model="submintModaADD" title="新增" :footer-hide="false">
      <div slot="footer">
        <Button @click="handleCancelADD">取消</Button>
        <Button type="primary" @click="handleSaveADD">确定</Button>
      </div>
      <Row class="RowStyle">
        <Col span="4" style="line-height: 30px">评价年度</Col>
        <Col span="20">
          <DatePicker
            :value="formItem.Year"
            type="year"
            placeholder="评价年度"
            style="width: 280px"
            @on-change="handleToChangeYear"
          ></DatePicker>
        </Col>
      </Row>
      <Row class="RowStyle">
        <Col span="4" style="line-height: 30px">评价期限</Col>
        <Col span="20">
          <DatePicker
            :value="formItem.term"
            format="yyyy/MM/dd"
            type="daterange"
            placement="bottom-end"
            placeholder="开始日期 - 结束日期"
            style="width: 280px"
            @on-change="handleToChangeTerm"
          ></DatePicker>
        </Col>
      </Row>
    </Modal>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      Datas:[],
      defaultData:[{
          Name:"浙江开山恺雷滤清器有限公司",
          term:"91310115568035014F",
          guimo:"规下",
          hangyeName:"电汽制造",
          daima:"3899",
          quyu:"白沙",
          time:"2011/1/12",
          firstTime:"",
          isJoin:"参评",

      },{
          Name:"进江东越实业有限公司",
          term:"91330000058315574K",
          guimo:"规上",
          hangyeName:"塑料制造",
          daima:"2921",
          quyu:"东港",
          time:"2012/11/22",
          firstTime:"2017",
          isJoin:"参评",

      },{
          Name:"巨化集团有限公司",
          term:"91330000142913112M",
          guimo:"规上",
          hangyeName:"电力供应",
          daima:"4420",
          quyu:"巨化",
          time:"1980/7/1",
          firstTime:"2017",
          isJoin:"参评",

      },{
          Name:"浙江巨圣氟化学有限公司",
          term:"91330000609802468Q",
          guimo:"规上",
          hangyeName:"塑料制造",
          daima:"2921",
          quyu:"巨化",
          time:"1994/8/25",
          firstTime:"2017",
          isJoin:"参评",

      },{
          Name:"浙江衢化氟化学有限公司",
          term:"9133000060980261X0",
          guimo:"规上",
          hangyeName:"化学制造",
          daima:"2614",
          quyu:"巨化",
          time:"1999/9/27",
          firstTime:"2017",
          isJoin:"参评",

      },{
          Name:"逝江逞天星集团股份有限公司",
          term:"9133000060985070XW",
          guimo:"规上",
          hangyeName:"皮革制造",
          daima:"1910",
          quyu:"高新",
          time:"1997/12/29",
          firstTime:"2017",
          isJoin:"参评",

      },{
          Name:"浙江巨化股份有限公司",
          term:"91330000704201556W",
          guimo:"规上",
          hangyeName:"化学制造",
          daima:"2614",
          quyu:"东港",
          time:"1997/9/27",
          firstTime:"2017",
          isJoin:"参评",

      },{
          Name:"浙江开山压缩机股份有限公司",
          term:"91330000704204554C",
          guimo:"规上",
          hangyeName:"化学制造",
          daima:"2614",
          quyu:"巨化",
          time:"1998/6/17",
          firstTime:"2017",
          isJoin:"参评",

      },{
          Name:"浙江国光生化股份有限公司",
          term:"9133000074100296XK",
          guimo:"规上",
          hangyeName:"机器制造",
          daima:"3442",
          quyu:"白沙",
          time:"1997/9/27",
          firstTime:"2017",
          isJoin:"参评",

      },{
          Name:"浙江巨化股份有限公司",
          term:"91330000704201556W",
          guimo:"规上",
          hangyeName:"其他",
          daima:"4130",
          quyu:"白沙",
          time:"1997/9/27",
          firstTime:"",
          isJoin:"参评",

      },],
      valueSearch: "",
      yearModel: 2019,
      yearList: [
        {
          value: 2019,
          label: 2019,
        },
        {
          value: 2020,
          label: 2020,
        },
        {
          value: 2021,
          label: 2021,
        },
      ],
      Model1: "",
      Model2: "",
      Model3: "",
      Model4: "",
      Model1List: [
        {
          value: "规上",
          label: "规上",
        },
        {
          value: "规下",
          label: "规下",
        },
      ],
      Model2List: [
        {
          value: "电汽制造",
          label: "电汽制造",
        },
        {
          value: "塑料制造",
          label: "塑料制造",
        },
        {
          value: "电力供应",
          label: "电力供应",
        },
        {
          value: "化学制造",
          label: "化学制造",
        },
        {
          value: "皮革制造",
          label: "皮革制造",
        },
        {
          value: "机械制造",
          label: "机械制造",
        },
        {
          value: "其他",
          label: "其他",
        },
      ],
      Model3List: [
        {
          value: "2017",
          label: "2017",
        },
      ],
      Model4List: [
        {
          value: "参评",
          label: "参评",
        },
        {
          value: "不参评",
          label: "不参评",
        },
      ],
      Id: 0, //存储ID
      classlyName: "", //分类名
      submintModa: false, //编辑弹框显示
      submintModaADD: false,
      columns: [
        {
          title: "序号",
          type: "index",
          width: 100,
          align: "center",
        },
        {
          title: "企业名称",
          key: "Name",
          align: "center",
          width: 250,
        },
        {
          title: "统一社会信用代码",
          key: "term",
          align: "center",
        },
        {
          title: "企业规模",
          key: "guimo",
          align: "center",
        },
        {
          title: "行业名称",
          key: "hangyeName",
          align: "center",
        },
        {
          title: "行业代码",
          key: "daima",
          align: "center",
        },
        {
          title: "所在区域",
          key: "quyu",
          align: "center",
        },
        {
          title: "注册时间",
          key: "time",
          align: "center",
        },
        {
          title: "首次上规时间",
          key: "firstTime",
          align: "center",
        },
        {
          title: "本年度是否参与评价",
          key: "isJoin",
          align: "center",
        },
        {
          title: "操作",
          key: "edit",
          align: "center",
          width: 280,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                  },
                  style: {
                    marginRight: "10px",
                  },
                  on: {
                    click: () => {
                      this.edit(params);
                    },
                  },
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small",
                  },
                  on: {
                    click: () => {
                      this.remove(params);
                    },
                  },
                },
                "删除"
              ),
            ]);
          },
        },
      ],
      ListData: [{}], //获取列表信息
      classlyNameObject: {},
      formItem: {
        Year: "0",
        term: "",
      },
      ruledataCount:0,
    };
  },
  computed: {
    

    dataCount() {
      return this.$store.state.login.user;
    },
  },

  methods: {
    ...mapMutations(["setRule"]),
    ...mapActions(["addRuleData", "getRuleListData", "editRuleData"]),
    // 新增
    handleToAddSetting() {
      this.submintModaADD = true;
      this.formItem.Year = "0";
      this.formItem.term = "";
    },
    handleSaveADD() {
      if (this.formItem.Year == 0) {
        this.$Message.warning("请选择评价年度");
        return;
      } else if (this.formItem.term == "") {
        this.$Message.warning("请选择评价期限");
        return;
      } else {
        this.addRuleData(this.formItem).then((res) => {
          console.log(res);
          if (res.code === 2000) {
            this.submintModaADD = false;
            this.$Message.success(res.msg);
            this.getRuleListData();
          } else if (res.code === 3003) {
            this.$Message.warning(res.msg);
          }
        });
      }
    },
    handleCancelADD() {
      this.submintModaADD = false;
      this.$Message.info("取消");
    },
    handleToChangeYear(event) {
      this.formItem.Year = event;
    },
    handleToChangeTerm(event) {
      console.log(event);
      this.formItem.term = event[0] + " - " + event[1];
    },
    //显示编辑
    edit(event) {
      console.log(event);
      this.submintModa = true;
      this.Id = event.row.id;
      this.formItem.Year = event.row.Year;
      this.formItem.term = event.row.term;
    },
    handleCancel() {
      this.$Message.info("取消");
    },
    handleSave() {
      //通过接口保存数据 ----> name
      this.editRuleData({
        id: this.Id,
        Year: this.formItem,
        term: this.formItem.term,
      }).then((res) => {
        console.log(res);
        if (res.code === 2000) {
          this.submintModa = false;
          this.$Message.success(res.msg);
          this.getRuleListData();
        } else if (res.code === 3003) {
          this.$Message.warning(res.msg);
        }
      });
    },
    //删除
    async remove(event) {
      console.log(event);
      this.$Modal.confirm({
        title: "是否删除？",
        onOk: () => {},
        onCancel: () => {
          this.$Message.info("取消");
        },
      });
    },

    // 翻页
    changePageCurrent(event) {
      this.setRule({
        pageCurrent: event,
      });
      this.getRuleListData();
    },
    changePageSize(event) {
      this.setRule({
        pageSize: event,
      });
      this.getRuleListData();
    },

    // 上传
    uploadSuccess(){
        this.Datas = this.defaultData;
        this.ruledataCount = 10;
        console.log("__上传成功__")

    },
    exportFile(){
      window.open("https://keyportal.krclouds.com/upload/2/0/20220518/1652840139538259700.xlsx")
    },
    cleanSelect(){
      this.Model1 = "";
      this.Model2 = "";
      this.Model3 = "";
      this.Model4 = "";
      this.valueSearch = "";
    },
  },
  created() {
    
  },
};
</script>

<style scoped lang="less">
.create {
  margin: 20px 0 0 30px;
  .titles {
    display: flex;
    justify-content: space-between;
  }
}
.RowStyle {
  margin: 20px;
}
</style>